<template>
  <view class="container">
    
    <Card class="search-card">
      <view class="search-box">
        <input 
          class="search-input" 
          type="text" 
          placeholder="搜索关联账户" 
          v-model="searchKeyword"
        />
        <Button class="search-btn" type="primary" size="small" text="搜索" />
      </view>
    </Card>
    
    <view class="accounts-list">
      <Card 
        v-for="(account, index) in filteredAccounts" 
        :key="index" 
        class="account-card"
        clickable
        @click="goToAccountDetail(account)"
      >
        <view class="account-info">
          <view class="avatar">
            <image v-if="account.avatar" :src="account.avatar" class="avatar-img" />
            <view v-else class="avatar-placeholder">头像</view>
          </view>
          <view class="account-details">
            <text class="account-name">{{ account.name }}</text>
            <text class="account-desc">{{ account.description }}</text>
          </view>
          <view class="account-status" :class="account.status === '正常' ? 'status-active' : 'status-inactive'">
            {{ account.status }}
          </view>
        </view>
      </Card>
    </view>
    
    <Button 
      class="add-btn" 
      type="primary" 
      text="新建关联账户" 
      @click="goToCreateAccount"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      accounts: [
        {
          id: '1',
          name: '张小明',
          description: '小学五年级',
          avatar: '',
          status: '正常'
        },
        {
          id: '2',
          name: '李小红',
          description: '初中一年级',
          avatar: '',
          status: '正常'
        },
        {
          id: '3',
          name: '王小刚',
          description: '高中二年级',
          avatar: '',
          status: '暂停'
        }
      ]
    };
  },
  
  computed: {
    filteredAccounts() {
      if (!this.searchKeyword) {
        return this.accounts;
      }
      
      return this.accounts.filter(account => 
        account.name.includes(this.searchKeyword) || 
        account.description.includes(this.searchKeyword)
      );
    }
  },
  
  methods: {
    goToAccountDetail(account) {
      uni.navigateTo({
        url: '/pages/account/associated-detail?id=' + account.id
      });
    },
    
    goToCreateAccount() {
      uni.navigateTo({
        url: '/pages/account/create-associated'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: $spacing-lg;
  padding: $spacing-xl 0;
}

.title {
  font-size: $font-size-xl;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-sm;
}

.subtitle {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.search-card {
  margin-bottom: $spacing-base;
}

.search-box {
  display: flex;
  flex-direction: row;
}

.search-input {
  flex: 1;
  height: 70rpx;
  padding: 0 $spacing-base;
  border: 1rpx solid $text-tertiary;
  border-radius: $border-radius-base;
  font-size: $font-size-sm;
  margin-right: $spacing-sm;
  box-sizing: border-box;
}

.search-btn {
  height: 70rpx;
}

.accounts-list {
  margin-bottom: $spacing-lg;
}

.account-card {
  margin-bottom: $spacing-sm;
}

.account-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: $spacing-base;
  overflow: hidden;
  background-color: $primary-color;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-img {
  width: 100%;
  height: 100%;
}

.avatar-placeholder {
  color: #fff;
  font-size: $font-size-xs;
}

.account-details {
  flex: 1;
}

.account-name {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-xs;
}

.account-desc {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.account-status {
  font-size: $font-size-sm;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
}

.status-active {
  background-color: rgba($secondary-color, 0.1);
  color: $secondary-color;
}

.status-inactive {
  background-color: rgba($text-tertiary, 0.1);
  color: $text-tertiary;
}

.add-btn {
  position: fixed;
  bottom: 40rpx;
  left: $spacing-base;
  right: $spacing-base;
}
</style>